<template>
  <div class="demo-image">
    <div v-for="fit in fits" :key="fit" class="block">
      <el-image style="width: 200px; height: 200px" :src="url" :fit="fit" />
    </div>
  </div>
  <h4>我的中心</h4>
  <el-table :data="userself" style="width: 100%">
    <el-table-column prop="nickName" label="昵称" />
    <el-table-column prop="sex" label="性别" />
    <el-table-column prop="phone" label="手机号" />
  </el-table>
  <el-table :data="userself" style="width: 100%">
    <el-table-column prop="role" label="账号" />
    <el-table-column prop="address" label="所在地" />
    <el-table-column prop="organ" label="所属" />
  </el-table>
</template>

<script>
import { userLogin } from '@/api/login'
export default {
  name: 'UserInfo',
  data() {
    return {
      fits: ['cover'],
      url: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.jJhCsyptbVkfNd7fpNc_uAHaHa?w=203&h=203&c=7&r=0&o=5&dpr=1.3&pid=1.7',
      userself: []
    }
  },
  methods: {
    userLogin() {
      userLogin().then(res => {
        console.log(res)
        if (res.data.code === 200) {
          console.log(res.data.data)
          this.userself[0] = res.data.data
        }
      })
    }
  },
  created() {
    this.userLogin()
  }
}
</script>

<style lang="scss" scoped>
.demo-image .block {
  padding: 30px 0;
  display: flex;
  box-sizing: border-box;
}

.demo-image .block:last-child {
  border-right: none;
}

.el-image {
  margin: auto;
}

h4 {
  margin-bottom: 20px;
}
</style>
